<template>
  <view class="add-poi-container">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="back-btn" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="page-title">添加无障碍点位</text>
    </view>
    
    <!-- 表单区域 -->
    <view class="form-container">
      <view class="form-item">
        <text class="form-label">名称</text>
        <input type="text" class="form-input" v-model="poiForm.name" placeholder="请输入点位名称"/>
      </view>
      
      <view class="form-item">
        <text class="form-label">类型</text>
        <view class="type-selector">
          <view 
            v-for="(type, index) in poiTypes" 
            :key="index" 
            class="type-item" 
            :class="{'type-selected': poiForm.type === type.value}"
            @click="selectType(type.value)"
          >
            <text class="type-text">{{ type.label }}</text>
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="form-label">位置信息</text>
        <view class="location-info">
          <text>{{ locationText }}</text>
        </view>
      </view>
      
      <view class="form-item">
        <text class="form-label">详细描述</text>
        <textarea class="form-textarea" v-model="poiForm.details" placeholder="请描述该点位的无障碍设施情况"/>
      </view>
      
      <view class="form-item">
        <text class="form-label">无障碍属性</text>
        <view class="attribute-list">
          <view class="attribute-item">
            <checkbox :checked="poiForm.attributes.wheelchair" @click="toggleAttribute('wheelchair')"/>
            <text>轮椅通道</text>
          </view>
          <view class="attribute-item">
            <checkbox :checked="poiForm.attributes.toilet" @click="toggleAttribute('toilet')"/>
            <text>无障碍卫生间</text>
          </view>
          <view class="attribute-item">
            <checkbox :checked="poiForm.attributes.elevator" @click="toggleAttribute('elevator')"/>
            <text>无障碍电梯</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-area">
      <button class="submit-btn" @click="savePOI">保存点位</button>
    </view>
  </view>
</template>

<script>
import { usePOIStore } from '@/store/poiStore';

export default {
  data() {
    return {
      // POI表单数据
      poiForm: {
        name: '',
        type: 'facility',
        details: '',
        address: '',
        location: null,
        attributes: {
          wheelchair: false,
          toilet: false,
          elevator: false
        }
      },
      // POI类型选项
      poiTypes: [
        { label: '无障碍设施', value: 'facility' },
        { label: '无障碍卫生间', value: 'toilet' },
        { label: '无障碍电梯', value: 'elevator' },
        { label: '爱心停车位', value: 'parking' }
      ],
      // 位置信息
      locationText: '正在获取位置...'
    }
  },
  
  onLoad() {
    // 从本地存储获取临时位置信息
    try {
      const position = uni.getStorageSync('temp_poi_position');
      if (position) {
        this.poiForm.location = JSON.parse(position);
        this.getAddressByLocation();
      } else {
        this.locationText = '未能获取位置信息';
      }
    } catch (e) {
      console.error('获取位置信息失败:', e);
      this.locationText = '位置信息获取失败';
    }
  },
  
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 选择POI类型
    selectType(type) {
      this.poiForm.type = type;
    },
    
    // 切换属性选择
    toggleAttribute(attr) {
      this.poiForm.attributes[attr] = !this.poiForm.attributes[attr];
    },
    
    // 根据经纬度获取地址信息
    getAddressByLocation() {
      if (!this.poiForm.location) {
        this.locationText = '位置信息不可用';
        return;
      }
      
      // 这里使用uni-app的getLocation API获取地址信息
      // 由于实际调用高德地图API需要在组件内操作，这里模拟获取地址
      const loc = this.poiForm.location;
      this.locationText = `经度: ${loc.lng.toFixed(6)}, 纬度: ${loc.lat.toFixed(6)}`;
      
      // 在实际项目中，应该使用高德地图API进行逆地理编码
      setTimeout(() => {
        // 模拟获取到的地址
        this.poiForm.address = '杭州市西湖区某某路123号附近';
        this.locationText = this.poiForm.address;
      }, 500);
    },
    
    // 验证表单数据
    validateForm() {
      if (!this.poiForm.name.trim()) {
        uni.showToast({
          title: '请输入点位名称',
          icon: 'none'
        });
        return false;
      }
      
      if (!this.poiForm.location) {
        uni.showToast({
          title: '位置信息不可用',
          icon: 'none'
        });
        return false;
      }
      
      return true;
    },
    
    // 保存POI
    savePOI() {
      // 表单验证
      if (!this.validateForm()) return;
      
      try {
        // 使用POI Store保存数据
        const poiStore = usePOIStore();
        
        // 准备要保存的POI数据
        const poiData = {
          name: this.poiForm.name.trim(),
          type: this.poiForm.type,
          details: this.poiForm.details.trim(),
          address: this.poiForm.address,
          location: this.poiForm.location,
          attributes: this.poiForm.attributes
        };
        
        // 添加到存储
        const result = poiStore.addPOI(poiData);
        
        if (result) {
          uni.showToast({
            title: '点位添加成功',
            icon: 'success'
          });
          
          // 清除临时存储
          uni.removeStorage({
            key: 'temp_poi_position'
          });
          
          // 延迟返回上一页
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        } else {
          throw new Error('添加失败');
        }
      } catch (error) {
        console.error('保存POI失败:', error);
        uni.showToast({
          title: '保存失败，请重试',
          icon: 'none'
        });
      }
    }
  }
}
</script>

<style>
.add-poi-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 40rpx;
}

.page-header {
  display: flex;
  align-items: center;
  padding: 30rpx 20rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
  position: relative;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 44rpx;
  color: #333;
}

.page-title {
  flex: 1;
  text-align: center;
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin-right: 60rpx; /* 平衡左侧返回按钮 */
}

.form-container {
  background-color: #fff;
  border-radius: 16rpx;
  margin: 30rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.form-input {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.form-textarea {
  width: 100%;
  height: 200rpx;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
}

.type-selector {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10rpx;
}

.type-item {
  margin: 10rpx;
  padding: 15rpx 30rpx;
  background-color: #f0f2f5;
  border-radius: 8rpx;
  font-size: 26rpx;
}

.type-selected {
  background-color: #3F7BFC;
  color: white;
}

.location-info {
  padding: 20rpx;
  background-color: #f0f2f5;
  border-radius: 8rpx;
  font-size: 26rpx;
  min-height: 80rpx;
  display: flex;
  align-items: center;
}

.attribute-list {
  display: flex;
  flex-direction: column;
}

.attribute-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.attribute-item text {
  margin-left: 20rpx;
  font-size: 28rpx;
}

.submit-area {
  padding: 40rpx 30rpx;
}

.submit-btn {
  background: linear-gradient(135deg, #3F7BFC, #4C6EFD);
  color: white;
  border-radius: 50rpx;
  font-size: 32rpx;
  height: 90rpx;
  line-height: 90rpx;
}
</style> 